<template>
    <div id="app">
        <router-view/>
        <div v-transfer-dom>
            <popup :value="showBindPhone" :hide-on-blur=false position="top">
                <div class="popup1">
                    <BindPhone/>
                </div>
            </popup>
        </div>
        <loading :show="isLoading"></loading>
    </div>

</template>

<script>
    import {Loading, Popup, Group, TransferDom} from 'vux';
    import {mapState} from 'vuex';
    import store2 from 'store2';
    import {authorizationR, getMytoken, authorizationcodeR} from './service/common';
    import {getUrlParam, isWeixin, getHash} from './uitls/common';
    import BindPhone from './router/my/myinfo/attestationphone.vue';
    export default {
        directives: {
            TransferDom
        },
        name: 'app',
        components: {
            Loading, Popup, Group, BindPhone
        },
        data(){
            return {
                show: true
            }
        },
        created(){
            this.authorization();
        },
        computed: {
            ...mapState('common', ['showBindPhone', 'isLoading'])
        },
        methods: {
            async authorization(){
                if(!isWeixin()) {
                    return;
                }
                const {token}=await getMytoken(true);
                if(!token) {
                    const url = location.href;
                    const code = getUrlParam('code');
                    if(code) {
                        const {data} = await authorizationcodeR(code);
                        if(data && data.code === 0) {
                            const {Guid}=data.data;
                            store2('userInfo', {...data.data, token: Guid});
                            return;
                        }
                    }
                    const {data}=await authorizationR(encodeURIComponent(`${location.origin}/#${getHash(url)}`));
                    if(data && data.code === 0) {
                        location.href = data.data;
                    }
                }
            }
        }

    }
</script>

<style>
    .popup1 {
        width: 100%;
        height: 100%;
    }

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #333;
    }

    html, body, #app {
        min-height: 100%;
        height: 100%;
        max-width: 750px;
        background: #f2f2f2;
        margin: 0 auto !important;
    }

    * {
        margin: 0;
        padding: 0
    }

    a, img {
        -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
    }

    a {
        text-decoration: none !important;
    }

    a:link, a:visited {
        text-decoration: none !important; /*超链接无下划线*/
    }

    address, caption, cite, code, dfn, em, b, i, th, var, b, strong {
        font-style: normal;
        font-weight: normal;
    }

    ul {
        list-style: none
    }

    table {
        border-collapse: collapse
    }

    body {
        font-size: 28px;
        line-height: 1.5;
        color: #333;
        font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    }

    .clearfix:before, .clearfix:after {
        display: table;
        content: ""
    }

    .clearfix:after {
        clear: both
    }

    a {
        text-decoration: none;
        color: #333
    }

    a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    a:hover {
        text-decoration: none;
    }

    .none {
        display: none
    }

    input, button, select, textarea {
        outline: none;
        border: none;
    }

    body .weui-dialog__bd {
        -webkit-user-select: all;
        user-select: all;
    }

    button {
        background: transparent;
        border-radius: 0;
    }
</style>
